{% extends "../base.html" %}

{% block title %}{% block page_title %}患者服务中心{% endblock %} - 医疗科技管理系统{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row gap-6">
    <!-- 侧边菜单 -->
    <div class="w-full md:w-64 bg-white rounded-xl shadow-soft p-4">
        <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-neutral-dark">学生训练菜单</h3>
        <ul class="space-y-1">
            <li>
                <a href="/student/dashboard" class="menu-item block px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">
                    <i class="fa fa-user-circle mr-2"></i>个人中心
                </a>
            </li>
            <li>
                <a href="/student/ai_patient_list" class="menu-item block px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">
                    <i class="fa fa-calendar-plus-o mr-2"></i>AI病人列表
                </a>
            </li>
            <li>
                <a href="" class="menu-item block px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">
                    <i class="fa fa-history mr-2"></i>诊疗记录
                </a>
            </li>
            <li>
                <a href="" class="menu-item block px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">
                    <i class="fa fa-file-text-o mr-2"></i>我的处方
                </a>
            </li>
        </ul>
        
        {% if request.path == '/student/ai_patient_list/' %}
        <div class="mt-8 pt-4 border-t border-neutral-dark">
            <h3 class="text-lg font-semibold mb-4">AI病人列表</h3>
            <!-- 网格布局显示头像 -->
            <div class="grid grid-cols-3 gap-4 ai-patient-selector">
                {% for patient in ai_patient_items %}
                <div>
                    <a href="javascript:void(0);" class="patient-item flex flex-col items-center p-3 rounded-lg transition-all duration-200" 
                    data-patient-id="{{ patient.id }}"
                    data-patient-code="{{ patient.patient_code }}"
                    data-patient-type="{{ patient.patient_type }}">
                        <!-- 头像显示区域（增大尺寸并添加选中高亮效果） -->
                        <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 border-2 border-transparent patient-avatar transition-all duration-200">
                            <!-- 可以替换为实际头像图片 -->
                            <i class="fa fa-user-md text-3xl"></i>
                        </div>
                        <!-- 编号显示在头像下方 -->
                        <span class="text-sm text-center">{{ patient.patient_code }}</span>
                    </a>
                </div>
                {% empty %}
                <div class="col-span-3 text-center text-gray-500 text-sm">暂无AI病人数据</div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- 主内容区域 -->
    <div class="flex-grow">
        <div class="bg-white rounded-xl shadow-soft p-6 h-full flex flex-col">
            {% block main_content %}
            <h2 class="text-2xl font-semibold mb-4">选择AI病人开始诊疗</h2>
            <p class="text-text-secondary">请从左侧列表选择一个AI病人进行模拟诊疗练习</p>
            
            <!-- AI聊天区域 (默认隐藏，选择病人后显示) -->
            <div id="chat-container" class="hidden flex-grow flex flex-col">
                <div class="border-b pb-2 mb-4">
                    <h3 class="text-xl font-semibold" id="current-patient-title">正在诊疗: <span></span></h3>
                </div>
                
                <!-- 聊天消息区域 -->
                <div id="message-area" class="flex-grow overflow-y-auto border rounded-lg p-4 mb-4 bg-neutral/50" style="min-height: 400px;">
                    <!-- 消息将通过JS动态添加 -->
                </div>
                
                <!-- 输入区域 -->
                <div class="flex gap-2">
                    <input type="text" id="message-input" class="flex-grow px-4 py-2 border border-neutral-dark rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入您的问诊内容...">
                    <button id="send-message" class="btn btn-primary px-6">发送</button>
                </div>
            </div>
            {% endblock %}
        </div>
    </div>
</div>
{% endblock %}
<style>
/* 选中状态的正方形高亮样式 */
.patient-item.selected {
    background-color: rgba(22, 93, 255, 0.05);
}

.patient-item.selected .patient-avatar {
    border-color: #165DFF;
    box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.1);
    /* 正方形高亮效果 */
    outline: 2px solid #165DFF;
    outline-offset: 2px;
}
</style>
{% block extra_js %}
<script>
$(document).ready(function() {
    // 存储当前选中的病人ID
    let currentPatientId = null;
    
    // 病人选择事件
    $('.patient-item').click(function() {
        // 更新选中状态
        $('.patient-item').removeClass('selected');
        // 给当前点击项添加选中状态
        $(this).addClass('selected');
        
        // 以下保持原有逻辑不变...
        currentPatientId = $(this).data('patient-id');
        const patientCode = $(this).data('patient-code');
        const patientType = $(this).data('patient-type');
        
        $('#current-patient-title span').text(`${patientCode} (${patientType})`);
        $('#chat-container').removeClass('hidden');
        
        // 清空消息区域并添加欢迎消息
        $('#message-area').html(`
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                    <i class="fa fa-user-md"></i>
                </div>
                <div class="bg-primary/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                    您好，我是${patientCode}，我感觉${patientType}，请您为我诊断。
                </div>
            </div>
        `);
        
        // 滚动到底部
        scrollToBottom();
    });
    
    // 发送消息
    $('#send-message').click(sendMessage);
    $('#message-input').keypress(function(e) {
        if (e.which === 13) { // 回车键发送
            sendMessage();
        }
    });
    
    // 发送消息函数
    function sendMessage() {
        if (!currentPatientId) {
            alert('请先选择一个AI病人');
            return;
        }
        
        const message = $('#message-input').val().trim();
        if (!message) return;
        
        // 添加用户消息到聊天区域
        $('#message-area').append(`
            <div class="flex mb-4 justify-end">
                <div class="bg-primary text-white p-3 rounded-lg rounded-tr-none max-w-[80%]">
                    ${message}
                </div>
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary ml-2">
                    <i class="fa fa-user"></i>
                </div>
            </div>
        `);
        
        // 清空输入框
        $('#message-input').val('');
        
        // 滚动到底部
        scrollToBottom();
        
        // 模拟AI回复 (实际项目中应发送AJAX请求到后端)
        setTimeout(function() {
            // 这里可以根据病人类型和问题内容返回不同的回复
            const replies = [
                "我感觉情况越来越严重了，您能给我一些建议吗？",
                "这种症状已经持续好几天了，我应该做些什么检查？",
                "除了您说的这些，我还需要注意些什么呢？",
                "我之前也有过类似的情况，但这次感觉不太一样。"
            ];
            
            const randomReply = replies[Math.floor(Math.random() * replies.length)];
            
            $('#message-area').append(`
                <div class="flex mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                        <i class="fa fa-user-md"></i>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                        ${randomReply}
                    </div>
                </div>
            `);
            
            scrollToBottom();
        }, 1000);
    }
    
    // 滚动到消息底部
    function scrollToBottom() {
        const messageArea = document.getElementById('message-area');
        messageArea.scrollTop = messageArea.scrollHeight;
    }
});
</script>
{% endblock %}